<!DOCTYPE html>
<html>
	
<head>
    	<meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        
    	<title>Oceanic Store - Responsive HTML Template</title>
        
        <link href="favicon.ico" rel="shortcut icon">
        
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

    	<link rel="stylesheet" type="text/css" href="css/markup.css">
        <link rel="stylesheet" type="text/css" href="css/flexslider.css">
        <link rel="stylesheet" type="text/css" href="css/elastislide.css">
        <link rel="stylesheet" type="text/css" href="css/colorbox.css">
        
        <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css">
        <![endif]-->
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        
        <script type="text/javascript" src="js/html5.js"></script>
        <script type="text/javascript" src="js/respond.min.js"></script>
        <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
        <script type="text/javascript" src="js/jquery.elastislide.js"></script>
        <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
        <script type="text/javascript" src="js/tabs.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
 	<body>
   		<div class="page">
            <div id="menu">
            	<div class="pivot">
                	<div class="separator float-right hide-phone"></div>
                	<div class="item float-right" id="language">
                    	<span class="light"><div><span class="icon icon-l"></span>Language</div></span>
                        <div class="drop-arrow"></div>
                        <div class="drop-content">
                            <div class="drop-body">
                                <ul>
                                    <li><a href="#"><img alt="Russian" src="os/lang-ru.png">Russian</a></li>
                                    <li><a href="#"><img alt="Belorussian" src="os/lang-by.png">Belorussian</a></li>
                                    <li><a href="#"><img alt="Ukrainian" src="os/lang-ua.png">Ukrainian</a></li>
                                    <li><a href="#"><img alt="English" src="os/lang-en.png">English</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                	<div class="separator float-right"></div>
                    <div class="item float-right">
                        <span class="light"><div><span class="icon icon-money"></span>US Dollar</div></span>
                        <div class="drop-arrow"></div>
                        <div class="drop-content">
                            <div class="drop-body">
                                <ul>
                                    <li><a href="#">Euro</a></li>
                                    <li><a href="#">Pesos</a></li>
                                    <li><a href="#">Pound Sterling</a></li>
                                    <li><a href="#">US Dollar</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="separator float-right"></div>
                    
                    <div class="separator hide-phone"></div>
                    <div class="item"><a class="light" href="login.html"><div><span class="icon icon-heart"></span>Wish List (0)</div></a></div>
                    <div class="separator"></div>
                    <div class="item"><a class="light" href="login.html"><div><span class="icon icon-user"></span>My Account</div></a></div>
                    <div class="separator"></div>
                    <div class="item"><a class="light" href="cart.html"><div><span class="icon icon-basket"></span>Shopping Cart</div></a></div>
                    <div class="separator"></div>
                    <div class="item"><a class="light" href="checkout.html"><div><span class="icon icon-card"></span>Checkout</div></a></div>
                    <div class="separator"></div>
                </div>
            </div>
            <div class="pivot">
                <header>
                    <div id="logo"><a href="index-2.html"><img src="images/logo.png" alt="Oceanic Store"></a></div>
                    <span id="search">
                        <input type="text" name="filter_name">
                        <span class="button-search"></span>
                    </span>
                    <br>
                    <span id="welcome">Welcome visitor you can <a href="login.html">login</a> or <a href="login.html">create an account</a>.</span>
                    <div id="cart" class="item">
                    	<div class="cart-total">
                        	<span class="icon show-phone hide-desktop hide-tablet"></span>$3208.00
                        	<div class="drop-arrow"></div>
                        </div>
                        <div class="cart-wrap">
                            <div class="cart-text">Shopping Cart</div>
                            <div class="cart-count">4 item(s)</div>
                        </div>
                        <div class="drop-content">
                            <div class="drop-body">
                                <table class="cart-list">
                                    <tbody>
                                        <tr>
                                            <td class="image"><a href="product.html"><img src="os/cart1.jpg" alt="Product Name"></a></td>
                                            <td class="name ta-left"><a href="product.html">Product Name</a><div></div></td>
                                            <td class="quantity ta-center">2</td>
                                            <td class="total">$1800.00</td>
                                            <td class="remove"><div></div></td>
                                        </tr>
                                        <tr>
                                            <td class="image"><a href="product.html"><img src="os/cart2.jpg" alt="Product Name"></a></td>
                                            <td class="name ta-left"><a href="product.html">Product Name</a><div></div></td>
                                            <td class="quantity ta-center">1</td>
                                            <td class="total">$600.00</td>
                                            <td class="remove"><div></div></td>
                                        </tr>
                                        <tr>
                                            <td class="image"><a href="product.html"><img src="os/cart3.jpg" alt="Product Name"></a></td>
                                            <td class="name ta-left"><a href="product.html">Product Name</a><div></div></td>
                                            <td class="quantity ta-center">1</td>
                                            <td class="total">$800.00</td>
                                            <td class="remove"><div></div></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="cart-end">
                                    <tbody>
                                        <tr>
                                            <th>Sub-Total:</th>
                                            <td>$3200.00</td>
                                        </tr>
                                        <tr>
                                            <th>Eco Tax (-2.00):</th>
                                            <td>$8.00</td>
                                        </tr>
                                        <tr>
                                            <th>Total:</th>
                                            <td>$3208.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="cart-buttons">
                                    <a href="checkout.html" class="button button-small button-alt">Checkout</a>
                                    <a href="cart.html" class="button button-small">View Cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
                
                <nav class="nav-phone show-phone hide-desktop hide-tablet">
                    <div>Menu</div>
                    <select>
                        <option>Home</option>
                        <option>Computers</option>
                        <option>Electronics</option>
                        <option>Books</option>
                        <option>Clothing</option>
                        <option>Shoes</option>
                        <option>Industrial</option>
                        <option>Toys</option>
                        <option>Watches</option>
                        <option>Fabric</option>
                    </select>
                </nav>

                <nav class="nav hide-phone">
                    <ul>
                        <li class="tftooltip" title="Home"><a href="index-2.html"><span class="icon"></span></a></li>
                        <li>
                        	<a href="list.html">Computers</a>
                            <div class="sub-arrow"></div>
                            <div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">Desktops</a></li>
                                        <li><a href="list.html">Software</a></li>
                                        <li><a href="list.html">Components</a></li>
                                    </ul>
                                    <ul>
                                        <li><a href="list.html">Monitors</a></li>
                                        <li><a href="list.html">Laptops</a></li>
                                        <li><a href="list.html">Tablets</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                        	<a href="list.html">Electronics</a>
                        	<div class="sub-arrow"></div>
                            <div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">MP3 Players</a></li>
                                        <li><a href="list.html">Cameras</a></li>
                                        <li><a href="list.html">Phones</a></li>
                                    </ul>
                                    <ul>
                                        <li><a href="list.html">Home Audio</a></li>
                                        <li><a href="list.html">Television</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="list.html">Books</a>
                            <div class="sub-arrow"></div>
                            <div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">History</a></li>
                                        <li><a href="list.html">Romance</a></li>
                                        <li><a href="list.html">Travel</a></li>
                                        <li><a href="list.html">Comics</a></li>
                                        <li><a href="list.html">Cookbooks</a></li>
                                        <li><a href="list.html">Professional</a></li>
                                    </ul>
                                    <ul>
                                    	<li><a href="list.html">Audiobooks</a></li>
                                        <li><a href="list.html">Children's Books</a></li>
                                        <li><a href="list.html">Crafts, Hobbies</a></li>
                                        <li><a href="list.html">Politics</a></li>
                                        <li><a href="list.html">Biographies</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                        	<a href="list.html">Clothing</a>
                            <div class="sub-arrow"></div>
                            <div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">Women</a></li>
                                        <li><a href="list.html">Men</a></li>
                                        <li><a href="list.html">Juniors</a></li>
                                    </ul>
                                    <ul>
                                        <li><a href="list.html">Kids</a></li>
                                        <li><a href="list.html">Baby</a></li>
                                        <li><a href="list.html">Accessories</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>
                        	<a href="list.html">Shoes</a>
                            <div class="sub-arrow"></div>
                        	<div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">Women's</a></li>
                                        <li><a href="list.html">Men's</a></li>
                                    </ul>
                                    <ul>
                                    	<li><a href="list.html">Kids</a></li>
                                        <li><a href="list.html">Sportswear</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="list.html">Industrial</a></li>
                        <li><a href="list.html">Toys</a></li>
                        <li><a href="list.html">Watches</a></li>
                        <li>
                        	<a href="list.html">Fabric</a>
                        	<div class="sub-arrow"></div>
                            <div class="sub-content">
                                <div class="sub-body">
                                    <ul>
                                    	<li><a href="list.html">Batik</a></li>
                                        <li><a href="list.html">Calico</a></li>
                                        <li><a href="list.html">Knits</a></li>
                                        <li><a href="list.html">Lace</a></li>
                                    </ul>
                                    <ul>
                                        <li><a href="list.html">Leather</a></li>
                                        <li><a href="list.html">Linen</a></li>
                                        <li><a href="list.html">Muslin</a></li>
                                        <li><a href="list.html">Satin</a></li>
                                    </ul>
                                    <ul>
                                        <li><a href="list.html">Silk</a></li>
                                        <li><a href="list.html">Toile</a></li>
                                        <li><a href="list.html">Tulle</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </nav>
            </div>            <div class="ribbon breadcrumb">
                <div class="top"></div>
                <div class="pivot">
                    <div class="center">
						<h1>Order Information</h1>
                        <a href="index-2.html">Home</a><span>\</span><a href="#">Account</a><span>\</span><a href="orders.html">Order History</a><span>\</span><a href="#">Order Information</a>
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
            <div class="pivot">
                <div id="content">
                    <aside id="content-right">
                    	<section class="content">
                        	<h2>Account</h2>
                            <ul class="list">
                                <li><a href="#">Login</a> / <a href="#">Register</a></li>
                                <li><a href="#">Forgotten Password</a></li>
                                <li><a href="#">My Account</a></li>
                                <li><a href="#">Wish List</a></li>
                                <li><a href="orders.html">Order History</a></li>
                                <li><a href="#">Downloads</a></li>
                                <li><a href="#">Returns</a></li>
                                <li><a href="#">Transactions</a></li>
                                <li><a href="#">Newsletter</a></li>
                            </ul>
                        </section>
                    </aside>
                    <div id="content-center">
                        <section class="content">
                        
                        	<h2>Order Details</h2>
                            <p>
                            	<b>Order ID:</b> #341<br>
                                <b>Date Added:</b> 10/05/2012<br>
                                <b>Payment Method:</b> Cash On Delivery<br>
                                <b>Shipping Method:</b> Flat Shipping Rate<br><br>
                            </p>
                            
                            <div class="fluid50">
                            	<h2>Payment Address</h2>
                                Address 1<br>
                                Ocenic 11s<br>
                                Angus<br>
                                United Kingdom
                            </div>
                            <div class="fluid50">
                            	<h2>Shipping Address</h2>
                                Address 1<br>
                                Ocenic 11s<br>
                                Angus<br>
                                United Kingdom
                            </div>
                            <div class="clear"></div>
                            
                            <h2>Products</h2>
                            <table class="table" width="100%">
                                <thead>
                                    <tr>
                                        <td class="ta-left">Product Name</td>
                                        <td class="ta-left hide-phone">Model</td>
                                        <td class="ta-right">Quantity</td>
                                        <td class="ta-right">Price</td>
                                        <td class="ta-right">Total</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="ta-left">Product Name</td>
                                        <td class="ta-left hide-phone">product 1</td>
                                        <td class="ta-right">2</td>
                                        <td class="ta-right">$900.00</td>
                                        <td class="ta-right">$1800.00</td>
                                    </tr>
                                    <tr>
                                        <td class="ta-left">Product Name</td>
                                        <td class="ta-left hide-phone">product 2</td>
                                        <td class="ta-right">1</td>
                                        <td class="ta-right">$600.00</td>
                                        <td class="ta-right">$600.00</td>
                                    </tr>
                                    <tr>
                                        <td class="ta-left">Product Name</td>
                                        <td class="ta-left hide-phone">product 3</td>
                                        <td class="ta-right">1</td>
                                        <td class="ta-right">$800.00</td>
                                        <td class="ta-right">$800.00</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="5">
                                        	<div class="float-right">
                                                $3200.00<br>
                                                $8.00<br>
                                                $3208.00
                                            </div>
                                            <div class="float-right ta-right" style="padding-right: 10px; font-weight: bold;">
                                                Sub-Total:<br>
                                                Eco Tax (-2.00):<br>
                                                Total:
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>

                            <h2>Order History</h2>
                            <table class="table" width="100%">
                                <thead>
                                    <tr>
                                        <td class="ta-left" width="20%">Date Added</td>
                                        <td class="ta-left">Status</td>
                                        <td class="ta-left">Comment</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="ta-left va-top">11/05/2012</td>
                                        <td class="ta-left va-top">Pending</td>
                                        <td class="ta-left va-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sagittis sem. Aliquam vitae egestas odio. Praesent euismod nunc vitae sapien cursus accumsan.</td>
                                    </tr>
                                    <tr>
                                        <td class="ta-left va-top">15/05/2012</td>
                                        <td class="ta-left va-top">Pending</td>
                                        <td class="ta-left va-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sagittis sem. Aliquam vitae egestas odio. Praesent euismod nunc vitae sapien cursus accumsan.</td>
                                    </tr>
                                </tbody>
                            </table>
                            <a href="orders.html" class="button">Continue</a>
                        </section>
                    </div>
                </div>
            </div>            <div class="ribbon">
                <div class="top"></div>
                <div class="pivot">
                    <div class="center">
                        <div class="column" id="about-us">
                            <img class="logo" src="images/logo.png" alt="Oceanic Store">
                          	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sagittis sem. Aliquam vitae egestas odio. Praesent euismod nunc vitae sapien cursus accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        </div>
                        
                        <div class="column">
                            <h2>Contact Us</h2>
                            <ul id="contacts">
                                <li>
                                    <div class="icon phone"></div>
                                    <div>0-000-000-00-00</div>
                                    <div>0-000-000-00-00</div>
                                </li>
                                <li class="one">
                                    <div class="icon fax"></div>
                                    <div>0-000-000-00-00</div>
                                    <div></div>
                                </li>
                                <li class="one">
                                    <div class="icon email"></div>
                                    <div>sample@sample.net</div>
                                    <div></div>
                                </li>
                                <li class="one">
                                    <div class="icon address"></div>
                                    <div>Vidnoe 52</div>
                                    <div></div>
                                </li>
                                <li class="one">
                                    <div class="icon skype"></div>
                                    <div>Username</div>
                                    <div></div>
                                </li>
                            </ul>	
                        </div>
                        <div class="column hide-phone">
                            <h2>Twitter</h2>
                            <ul class="tweet_list">
                                <li class="tweet_first tweet_odd">
                                    <span class="tweet_text"><img src="os/avatar.png" alt="Username">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">link</a></span>
                                    <span class="tweet_time"><a href="#" title="view tweet on twitter">about 7 hours ago</a></span>
                                    <span class="tweet_icon"></span>
                                </li>
                                <li class="tweet_even">
                                    <span class="tweet_text"><img src="os/avatar.png" alt="Username">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">link</a></span>
                                    <span class="tweet_time"><a href="#" title="view tweet on twitter">about 7 hours ago</a></span>
                                    <span class="tweet_icon"></span>
                                </li>
                                <li class="tweet_odd">
                                    <span class="tweet_text"><img src="os/avatar.png" alt="Username">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">link</a></span>
                                    <span class="tweet_time"><a href="#" title="view tweet on twitter">about 7 hours ago</a></span>
                                    <span class="tweet_icon"></span>
                                </li>
                            </ul>	
                        </div>
                        <div class="column hide-phone hide-tablet">
                            <h2>Facebook</h2>
                           
                            <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
                            <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
                            <div id="facebook">
								<script type="text/javascript">
                                    var l = window.location;
                                    var p = l.protocol + '//' + l.host + l.pathname.toString().replace(/\/[^\/]+$/, '/');
                                	
									/* FACEBOOK ID */
                                    var fbId = '109822959866';
                                    var fbCSS = p + 'css/facebook.css';
                                    
                                    document.write('<fb:fan profile_id="' + fbId + '" stream="0" connections="6" logobar="0" width="220" height="250" css="' + fbCSS + '"></fb:fan>');
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
            <div class="pivot">
                <footer>
                    <div class="column first">
                        <h2>Information</h2>
                        <ul>
                            <li><a href="about.html">About Us</a></li>
                            <li><a href="#">Delivery Information</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                        </ul>
                    </div>
                    <div class="column">
                        <h2>Customer Service</h2>
                        <ul>
                            <li><a href="contacts.html">Contact Us</a></li>
                            <li><a href="#">Returns</a></li>
                            <li><a href="sitemap.html">Site Map</a></li>
                        </ul>
                    </div>
                    <div class="column">
                        <h2>Extras</h2>
                        <ul>
                            <li><a href="#">Brands</a></li>
                            <li><a href="#">Gift Vouchers</a></li>
                            <li><a href="#">Affiliates</a></li>
                            <li><a href="#">Specials</a></li>
                        </ul>
                    </div>
                    <div class="column last">
                        <h2>My Account</h2>
                        <ul>
                            <li><a href="login.html">My Account</a></li>
                            <li><a href="orders.html">Order History</a></li>
                            <li><a href="#">Wish List</a></li>
                            <li><a href="#">Newsletter</a></li>
                        </ul>
                    </div>
                </footer>
                <div id="copyright">
                    <div class="float-right">Powered By Oceanic Store</div>
                    Theme by <a href="http://themefest.ru/" target="_blank">ThemeFest</a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </body>

</html>